<template>
    <el-dialog v-model="drawer"
               @close="closeEvent"
               width="660px">
        <template #header="{ close, titleId, titleClass }">
            <el-row>
                <el-col :span="7">
                    <h4 style="line-height: 32px;" :id="titleId" :class="titleClass">请选择上级客户</h4>
                </el-col>
                <el-col :span="13">
                    <el-input v-model.trim="search" :clearable="true" placeholder="通过搜索名称" size="mini">
                        <template #append>
                            <el-button type="success" size="mini" @click="loadTableData">搜索</el-button>
                        </template>
                    </el-input>
                </el-col>
            </el-row>
        </template>
        <el-table :data="state.tableData"
                  stripe
                  style="width: 100%"
                  v-loading="tableLoading"
                  size="small" >
            <el-table-column property="username" label="名称" />
            <el-table-column property="shortName" label="简称"  />
            <el-table-column fixed="right" label="操作" width="100">
                <template  #default="scope">
                    <el-button type="primary" size="small" @click="onSelectEvent(scope.row)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <div class="page__body">
                <el-pagination
                    v-model:page-size="state.size"
                    v-model:currentPage="state.current"
                    v-model:total="state.total"
                    layout="prev, pager, next"
                    @size-change="loadTableData"
                    @current-change="loadTableData"
                />
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup >
import {ref, toRefs, onMounted, watch, computed, reactive} from 'vue'
import {umsMemberApi} from "/@/api/ums/member";
import {ElMessage} from "element-plus";

/** 此处引入，支持多个 */
const emit = defineEmits(['update:dialogPop','customerType'])
/** 定义组件入参 */
const props = defineProps({
    dialogPop: Boolean, // 控制显示隐藏
})
const {dialogPop} = toRefs(props)
/** 双向绑定 */
let drawer:any = computed({
    get: () => dialogPop.value,
    set: (val) => emit('update:dialogPop', val)
})
/** 关闭弹窗 */
const closeEvent = () => drawer = false
// 状态数据
const state = reactive({
    size: 10,// 页容
    current: 1,// 当前页
    total: 0,// 记录条数据
    tableData: [],// 表格数据
})
// 搜索数据
const search = ref<string>('')
// 表格加载显示
const tableLoading = ref<boolean>(false)
// 点击选中某个代理商
const onSelectEvent = (obj:any) => {
    emit('customerType', obj)
    emit('update:dialogPop', false)
}
// 加载表格数据
const loadTableData = async () => {
    tableLoading.value = true
    try {
        const page:any = {
            current: state.current,
            size: state.size,
            customerType: '1'
        }
        if (search.value && search.value != ""){
            page['username'] = search.value
        }
        const {data} = await umsMemberApi().page(page)
        const { current,size,total,records } = data
        state.current = current
        state.size = size
        state.total = total
        state.tableData = records
    } catch (e: any) {
        console.log('加载代理商列表失败\n', e)
        ElMessage.error(e.message)
    }
    tableLoading.value = false
}

/** 监听打开就加载 */
watch(() => dialogPop.value, (val: any) => {
    if (val) {
        reset()
        loadTableData()
    }
})
// 重置数据
const reset = () => {
    state.current = 1
    state.size = 10
    state.total = 0
    state.tableData = []
    search.value= ''
}
</script>

<style scoped lang="scss">

.page__body{
    display: flex;
    justify-content: center;
    align-items: center;
}

</style>


